<template>
	<view class="content ">
		<hx-navbar ref="hxnb" :config="config">
			<block slot="max">
				<view class="nav_wrap flex">
					<view class="back_wrap flex" @click="showsr1=true">
						<image class="dq-icon" src="../../static/img/home/aq-icon.png" mode=""></image>
						<view class="diqu">{{address}}</view>
						<u-icon name="arrow-down" color="#ffffff" size="24"></u-icon>
					</view>
					
				</view>
			</block>
		</hx-navbar>
		<view class="main-div">
			<image class="main-bg" src="../../static/img/lawyer/la-bg.png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>
			<view class="m-d">
				<view class="seach-div flex u-p-l-24 u-m-l-32 u-m-t-16"  @click="search">
					<image class="s-i" src="../../static/img/home/ss-2.png" mode=""></image>
					<view class="u-m-l-24">
						请输入相关词搜索
					</view>
				</view>
				<view class="ss-div">
					<mytabs :list="typelist" active-color="#F62C10" bar-width="72" :current="typeIndex" @change="change"></mytabs>
				</view>
				
			</view>
		</view>
		
		<view class="u-menu-wrap u-m-t-16">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(item2,index2) in lyselector" :key="index2" class="u-tab-item"
					:class="[current==index2 ? 'u-tab-item-active' : '']" :data-current="index2"
					@tap.stop="swichMenu(index2)">
					<text class="">{{item2.name}}</text>
				</view>
			</scroll-view>
			
		
			<block>
				<scroll-view scroll-y class="right-box">
					<view class="page-view">
						<view class=" flex flex_wrap flex_sb">
							<view class="page-view-item u-m-b-12" v-for="(item,index) in lvshilist" :key="index"  @click="zixun(item)">
								
								<view class="jpls-zt-top">
									<image class="zhutu" :src="item.avatar" mode="aspectFill"></image>
									<view class="jpls-zt" v-if="item.is_online==1">
										在线
									</view>
								</view>
								<view class="flex u-m-t-22">
									<view class="font_14_333 font_weight">
										{{item.name}}
									</view>
									<image class="h23" src="../../static/img/home/h23.png" mode=""></image>
								</view>
								<view class="u-m-t-8">
									<span class="m-fh">￥</span>
									<span class="m-m">{{item.price}}</span>
									<span class="m-sj">/{{item.time_sku}}{{item.unit}}</span>
								</view>
								<view class="u-m-t-12 m-btn">
									{{item.is_online==1?'立即咨询':'预约咨询'}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</block>
		</view>
		<u-popup v-model="zixunShow" mode="bottom" closeable border-radius="32" :mask-close-able="false">
			<view class="po-bikan">
				<view class="bk-title u-m-b-32">
					全部服务
				</view>
				<scroll-view scroll-y="true" style="height: 650rpx;"  >
					<fuwuList v-if="id" :sid="id"></fuwuList>
				</scroll-view>
			</view>
		</u-popup>
		<gongzhonghaotanchuangVue></gongzhonghaotanchuangVue>
		<!-- <u-picker :params="params" mode="region" confirm-color="#651321" v-model="showsr1" @confirm="regionconfirm1"></u-picker> -->
		<u-select v-model="showsr1" mode="single-column" :list="addressList" @confirm="regionconfirm1" value-name="id" label-name="name"></u-select>
		<u-tabbar active-color="#FA3B21" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import fuwuList from '../../components/fuwuList/fuwuList.vue';
	import mytabs from "../../components/my-tabs/my-tabs.vue"
	import gongzhonghaotanchuangVue from '../../components/gongzhonghaotanchuang/gongzhonghaotanchuang.vue';
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	export default {
		components: {
			fuwuList,
			mytabs,gongzhonghaotanchuangVue
		},
		data() {
			return {
				id:'',
				zixunShow: false,
				addressList:[],
				params: {
					province: true,
					city: true,
					area: true
				},
				statusBarHeight: statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#FF4860'],
					slideBackgroundColor: [1, '#FF4860']
				},
				tabbar: '',
				showsr1: false,
				address: '请选择',
				typeIndex: 0,
				
				bottomShow:true,
				
				typelist: [
				// 	{
				// 	name: '电话咨询',
				// 	icon:require("../../static/img/home/h-5.png")
				// },{
				// 	name: '图文咨询',
				// 	icon:require("../../static/img/home/h-6.png")
				// },
				{	
					id:12,
					name: '律师函',
					icon:require("../../static/img/home/h-9.png")
				},{
					id:13,
					name: '文书代写',
					icon:require("../../static/img/home/h-10.png")
				},{
					id:14,
					name: '合同审查',
					icon:require("../../static/img/home/h-11.png")
				},{
					id:15,
					name: '诉讼指导',
					icon:require("../../static/img/home/h-12.png")
				},{
					id:16,
					name: '线上调解',
					icon:require("../../static/img/home/h-13.png")
				},{
					id:17,
					name: '法律意见书',
					icon:require("../../static/img/home/h-14.png")
				},],
				
				
				
				scrollTop: 0, //tab标题的滚动条位置
				current: -1, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				
				
				lyselector:[],
				selector1:[],
				lvshilist:[],
				
				serve_id:'',
				task_id:'',
				province:'',
				
				total:0,
				pageNum:1,
				pageSize:20,
			}
		},
		onReachBottom() {
			if (this.pageNum * this.pageSize > this.total) {
				// uni.hideNavigationBarLoading();
			} else {
				this.pageNum++;
				this.getlvshi()
			}
		},
		onLoad(e) {
			this.tabbar = [{
					iconPath: "/static/img/tabBar/1-2.png",
					selectedIconPath: "/static/img/tabBar/1-1.png",
					text: '首页',
					pagePath: "/pages/index/index"
				}, {
					iconPath: "/static/img/tabBar/2-2.png",
					selectedIconPath: "/static/img/tabBar/2-1.png",
					text: '找律师',
					pagePath: "/pages/lawyer/lawyer"
				}, {
					iconPath: "/static/img/tabBar/3-1.png",
					selectedIconPath: "/static/img/tabBar/3-1.png",
					text: 'AI模型',
					midButton: true,
					pagePath: "/pages/AI/AI"
				}, {
					iconPath: "/static/img/tabBar/4-1.png",
					selectedIconPath: "/static/img/tabBar/4-1.png",
					text: '在线咨询',
					// count: 2,
					isDot: false,
					pagePath: "/TXIM/pages/consultation/consultation"
				}, {
					iconPath: "/static/img/tabBar/5-2.png",
					selectedIconPath: "/static/img/tabBar/5-1.png",
					text: '我的',
					pagePath: "/pages/mine/mine"
				},
			
			]
			
			
			this.typeIndex = e.type
			
			this.serve_id = this.typelist[this.typeIndex].id
			this.lingyuList()
			
			
			this.getaddrerss()
			
			
			if(uni.getStorageSync("localAddress")){
				let localAddress = JSON.parse(uni.getStorageSync("localAddress")) 
				this.address = localAddress.address
				this.province = localAddress.province
			}
			
			this.getlvshi()
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		methods: {
			toDetail(e){
				uni.navigateTo({
					url:"/pages/lawyer/lawyerDetail?id=" + e.id
				})
			},
			zixun(item) {
				if(item.is_online==1){
					this.id = ''
					setTimeout(()=>{
						this.id = item.id
						this.zixunShow = true
					},50)
				}else{
					this.todetail(item)
				}
				
				
				
			},
			getaddrerss(){
				this.$api({
					url: '/getChinaArea',
					method: 'get',
				}).then(res => {
					if (res.code == 1) {
						this.addressList = res.data
					}
				})
			},
			lingyuList() {
				// this.$api({
				// 	url: '/lawyer/getTags',
				// 	method: 'get',
				// 	data: {
				// 		token: uni.getStorageSync("token"),
				// 		type: 1 //类型：1=擅长领域，2=服务类型
				// 	},
				// }).then(res => {
				// 	if (res.code == 1) {
				// 		this.lyselector = res.data
				// 	}
				// })
				
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type: 1 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.lyselector = res.data
					}
				})
			},
			
			getlvshi(){
				this.$api({
					url: '/lawyer/list',
					method: 'get',
					data: {
						page:this.pageNum,
						limit:this.pageSize,
						serve_id:this.serve_id,
						task_id:this.task_id,
						province:this.province,
					},
				}).then(res => {
					if (res.code == 1) {
						// this.lvshilist = res.data.data
						
						this.total=res.data.total
						let data = res.data.data
						if (this.pageNum == 1) {
							this.lvshilist = data
						} else {
							this.lvshilist = [...this.lvshilist, ...data]
						}
					}
				})
			},
			
			todetail(e){
				uni.navigateTo({
					url:"/pages/lawyer/lawyerListDetail?id="+e.id
				})
			},
			change(index) {
				this.pageNum = 1
				this.typeIndex = index;
				this.serve_id = this.typelist[this.typeIndex].id
				this.getlvshi()
			},
			regionconfirm1(e) {
				this.pageNum = 1
				// this.address = e.province.label + e.city.label + e.area.label
				// this.address = e.area.label
				// this.province = e.area.value
				this.address = e[0].label
				this.province = e[0].value
				this.getlvshi()
				console.log(e)
				
				let localAddress = {
					address:this.address,
					province:this.province
				}
				uni.setStorage({
					key: 'localAddress',
					data: JSON.stringify(localAddress)
				});
			},
			
			// 点击左边的栏目切换
			async swichMenu(id) {
				if (id == this.current) return;
				this.current = id;
				this.task_id = this.lyselector[this.current].id
				this.pageNum = 1
				this.getlvshi()
				
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				// this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					}).exec();
				})
			},
			
			search() {
				uni.navigateTo({
					url: "/pages/index/search"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.jpls-zt-top {
		position: relative;
		width: 224rpx;
		height: 276rpx;
	
		
		
	
		.jpls-zt {
			position: absolute;
			top: 0;
			left: 0;
			width: 78rpx;
			height: 40rpx;
			background: #FFFFFF;
			border-radius: 8rpx 0rpx 20rpx 0rpx;
			background-color: rgba(255, 255, 255, 0.2);
			font-size: 24rpx;
			color: #38E552;
			line-height: 40rpx;
			text-align: center;
		}
	}
	.po-bikan {
		padding: 40rpx 32rpx;
		background: #F6F6F6;
		width: 100%;
	
		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}
	}
	.nav_wrap {
		width: 100vw;
		position: relative;
		height: 80rpx;

		.back_wrap {
			position: absolute;
			left: 24rpx;

			.diqu {
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 12rpx;
			}

			.dq-icon {
				width: 28rpx;
				height: 34rpx;
			}
		}

		.page_title {
			width: 100vw;
			text-align: center;
			font-weight: bold;
		}
	}

	.main-div {
		position: relative;
		width: 100%;

		.main-bg {
			width: 100%;
			height: 280rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

		.zhanwei {
			width: 100%;
		}
	}
	
	.m-d {
		position: relative;
		padding-top: 88rpx;
		z-index: 2;

		.seach-div {
			width: 686rpx;
			height: 72rpx;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			border: 1rpx solid #FFFFFF;
			font-size: 24rpx;
			color: #FFFFFF;

			.s-i {
				width: 32rpx;
				height: 32rpx;
			}
		}

	}
	
	.page-view-item{
		width: 248rpx;
		// height: 492rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 10rpx 12rpx 30rpx;
		.zhutu{
			width: 224rpx;
			height: 276rpx;
			border-radius: 8rpx;
		}
		.h23{
			width: 24rpx;
			height: 20rpx;
			margin-left: 8rpx;
		}
		.m-fh{
			font-weight: bold;
			font-size: 24rpx;
			color: #FC3A30;
		}
		.m-m{
			font-weight: bold;
			font-size: 32rpx;
			color: #FC3A30;
		}
		.m-sj{
			font-size: 20rpx;
			color: #666666;
		}
		.m-btn{
			width: 200rpx;
			height: 56rpx;
			background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 56rpx;
			margin: 0 auto;
		}
	}
	.u-scroll-view {
		width: 100%;
		white-space: nowrap;
		position: relative;
	}

	.ss-div {
		width: 100%;
		height: 166rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 0 24rpx;

		.ss-div-item {
			font-size: 24rpx;
			color: #333333;
			// margin-right: 40rpx;
			min-width: 154rpx;
			background: #FFFFFF;
			height: 166rpx;
			padding-top: 34rpx;

			image {
				width: 56rpx;
				height: 56rpx;
				margin: 0 auto;
			}

			&-sel {
				color: #F62C10;
				border-bottom: 6rpx solid #F62C10;
			}
		}
	}
	
	
	
	
	
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - 94rpx);
		/* #endif */
		display: flex;
		flex-direction: column;
	}
	
	
	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	
	
	
	.u-tab-view {
		width: 200rpx;
		background: #FFFFFF;
		height: 100%;
	}
	
	.u-tab-item {
		width: 200rpx;
		height: 84rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		line-height: 33rpx;
		text-align: center;
		padding: 22rpx 18rpx 22rpx 28rpx;
		border-left: 6rpx #ffffff solid;
	}
	
	.u-tab-item-active {
		position: relative;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		background-color: #F5F5F6;
		border-left: 6rpx #F62C10 solid;
	}
	
	
	
	.u-tab-view {
		height: 100%;
	}
	
	.right-box {
		background-color: #F5F5F6;
		height: 100%;
	}
	
	.page-view {
		padding: 20rpx;
	}
	
	
	
</style>